<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">{{cid==1?'商学院':'精彩瞬间'}}</block> 
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox" :class="cid==2?'viewbox_aa':''"></view>
			<view class="article_a" v-if="cid==1">
				<view class="article_a_a" @click="sort_click(1)" :class="sort==1?'article_a_aa':''">最新</view>
				<view class="article_a_a" @click="sort_click(2)" :class="sort==2?'article_a_aa':''">最热</view>
			</view>
			<view class="article_b" v-if="cid==1">
				<view class="article_b_a" @click="goPage('/pages/article/info?id='+item.id)" v-for="(item, index) in articleList">
					<view class="article_b_aa">
						<view class="article_b_a_a">
							<image :src="item.image"></image>
						</view>
						<view class="article_b_a_aa">
							<view class="article_b_a_b">{{item.title}}</view>
							<view class="article_b_a_c">
								<view class="article_b_a_c_a">
									<image :src="item.company_logo"></image>
								</view>
								<view class="article_b_a_c_b">{{item.company_name}}</view>
							</view>
							<view class="article_b_a_d">
								<view class="article_b_a_d_a">
									<view class="article_b_a_d_a_a">
										<u-icon name="eye" color="#3D3D3D" size="15"></u-icon>
									</view>
									<view class="article_b_a_d_a_b">{{item.visit}}</view>
								</view>
								<view class="article_b_a_d_a">
									<view class="article_b_a_d_a_a">
										<u-icon name="heart" :color="item.is_collect>0?'#E71102':'#3D3D3D'" size="15"></u-icon>
									</view>
									<view class="article_b_a_d_a_b">{{item.likes}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="article_c" v-if="cid==2">
				<view class="article_c_a" @click="goPage('/pages/article/info?id='+item.id)" v-for="(item, index) in articleList">
					<view class="article_c_a_a">
						<image :src="item.image"></image>
					</view>
					<view class="article_c_a_b">
						<view class="article_c_a_b_a">{{item.title}}</view>
						<view class="article_b_a_d" style="margin-top: 45rpx;">
							<view class="article_b_a_d_a">
								<view class="article_b_a_d_a_a">
									<u-icon name="eye" color="#3D3D3D" size="15"></u-icon>
								</view>
								<view class="article_b_a_d_a_b">{{item.visit}}</view>
							</view>
							<view class="article_b_a_d_a">
								<view class="article_b_a_d_a_a">
									<u-icon name="heart" :color="item.is_collect>0?'#E71102':'#3D3D3D'" size="15"></u-icon>
								</view>
								<view class="article_b_a_d_a_b">{{item.likes}}</view>
							</view>
							<view class="article_b_a_d_b">{{item.create_time}}</view>
						</view>
					</view>
				</view>
			</view>
			<loading-footer :status="status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/goods_null.png"></image>
					<text class="lighter">暂无文章</text>
				</view>
			</loading-footer>
		</view>
	</view>
</template>
<script>
import request from '@/common/request.js';	
import {
	loadingType
} from '@/utils/type';
export default {
	data() {
		return {
			showLoading:true,
			status: loadingType.LOADING,
			page: 1,
			limit:8,
			articleList:[],
			type:1,
			uid:0,
			sort:1,
			cid:1
		}
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
	  this.cid = options.cid??2;
	  this.onRefresh();
	},
	onShow() {
		this.uid=uni.getStorageSync('uid');
	},
	onReachBottom: function() {
		this.getArticleListFun();
	},
	methods: {
		goPage(url) {
			uni.navigateTo({
				url
			});
		},
		sort_click(e){
			this.sort=e;
			this.onRefresh();
		},
		onRefresh() {
			this.page = 1
			this.articleList = []
			this.status = loadingType.LOADING
			this.$nextTick(() => {
				this.getArticleListFun();
			});
		},
		async getArticleListFun() {
			let {
				page,
				limit,
				articleList,
				sort,
				cid,
				status
			} = this;
			if (status == loadingType.FINISHED) return;
			const paramsList = {
				page: page,
				size:limit,
				sort:sort,
				cid:cid,
				uid:this.uid,
			}
			let optsList = {
				url: 'a-lists',
				method: 'post'
			};
			request.httpRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					if(page == 1) articleList = []
					let {
						list,
						more
					} = res.data.data
					this.articleList.push(...list)
					this.page = ++page
					if (!more) {
						this.status = loadingType.FINISHED
					}
					if (this.articleList.length <= 0) {
						this.status = loadingType.EMPTY
					}
				} else {
					this.status = loadingType.ERROR
				}
				this.showLoading=false;
			});
		},
	}
}
</script>

<style  lang="scss" scoped>
	.viewbox_aa{
		background-color: #fff;
	}
	.article_a{
		width:700rpx;
		margin: auto;
		margin-top: 20rpx;
		overflow: hidden;
	}
	.article_a_a{
		float: left;
		height: 50rpx;
		width: 80rpx;
		text-align: center;
		background-color: #fff;
		border: 1rpx solid #fff;
		font-family: 思源黑体;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 50rpx;
		color: #333333;
		margin-right: 20rpx;
		border-radius: 200rpx;
	}
	.article_a_aa{
		border: 1rpx solid #E71102;
		background-color: #FFF1F0;
		color: #E71102;
	}
	.article_b{
		width:750rpx;
		margin: auto;
		overflow: hidden;
	}
	.article_b_a{
		margin-top: 20rpx;
		float:left;
		width: 50%;
		overflow: hidden;
	}
	.article_b_aa{
		width: 90%;
		overflow: hidden;
		margin: auto;
		border-radius: 16rpx;
		background-color: #fff;
	}
	.article_b_a_a{
		width:350rpx;
		height:350rpx;
	}
	.article_b_a_a image{
		width:100%;
		height:100%;
	}
	.article_b_a_aa{
		padding: 10rpx;
		overflow: hidden;
	}
	.article_b_a_b{
		font-family: Source Han Sans;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 44rpx;
		color: #333333;
		overflow: hidden;
		text-overflow:ellipsis;    
		white-space: nowrap;
	}
	.article_b_a_c{
		margin-top: 20rpx;
		overflow: hidden;
	}
	.article_b_a_c_a{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		float: left;
	}
	.article_b_a_c_a image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.article_b_a_c_b{
		float: left;
		margin-left: 15rpx;
		font-family: 思源黑体;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 40rpx;
		color: #666666;
	}
	.article_b_a_d{
		overflow: hidden;
		margin-top: 20rpx;
	}
	.article_b_a_d_a{
		float: left;
		margin-right: 40rpx;
	}
	.article_b_a_d_a_a{
		float: left;
	}
	.article_b_a_d_a_b{
		font-family: Source Han Sans;
		font-size: 24rpx;
		font-weight: normal;
		line-height:33rpx;
		color: #666666;
		float: left;
		margin-left: 15rpx;
	}
	.article_c{
		width: 700rpx;
		height: auto;
		overflow: hidden;
		margin: auto;
	}
	.article_c_a{
		overflow: hidden;
		margin-top: 20rpx;
	}
	.article_c_a_a{
		width: 160rpx;
		height: 160rpx;
		float: left;
	}
	.article_c_a_a image{
		width: 160rpx;
		height: 160rpx;
	}
	.article_c_a_b{
		float:right;
		width: 525rpx;
	}
	.article_c_a_b_a{
		font-family: Source Han Sans;
		font-size: 32rpx;
		font-weight: 500;
		color: #3D3D3D;
		height: 80rpx;
		overflow: hidden;
	}
	.article_b_a_d_b{
		float: right;
		font-family: Source Han Sans;
		font-size: 24rpx;
		font-weight: normal;
		line-height:33rpx;
		color: #666666;
	}
</style>
